<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="./../include/stdlib.jspf" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@include file="include/meta.jspf" %>
    <title>广告牌管理</title>
    <link rel="stylesheet" href="${root}/static/wechat/css.css">
    <link rel="stylesheet" href="${root}/static/wechat/index.css">
    <%@include file="include/script.jspf" %>
</head>
<body style="background-color: #f6f6f6">
<!--content start-->
<c:choose>
    <c:when test="${wxUser != null}">
        <div class="navigate">
            <div class="navigate_top">
                <ul>
                    <li class="navigate_top_o navigate_cl">请选择市<span></span></li>
                    <li class="navigate_top_t navigate_cl">请选择区<span></span></li>
                    <li class="navigate_top_s navigate_cl">请选择街道</li>
                </ul>
            </div>

            <div id="cityDiv" class="navigate_c navigate_c_o"
                 style="position: absolute;top: 40px;left: 0;width: 100%;background: #fff">
                <input type="hidden" id="city" value="">
                <ul>
                    <li value="" style="border: 1px solid #E5E5E5;height: 40px;line-height: 40px;padding-left: 10%;">
                        请选择市
                    </li>
                    <c:forEach items="${city}" var="item">
                        <li data-value="${item.id}"
                            style="border: 1px solid #E5E5E5;height: 40px;line-height: 40px;padding-left: 10%;">${item.name}</li>
                    </c:forEach>
                </ul>
            </div>
            <div id="districtDiv" class="navigate_c navigate_c_t"
                 style="position: absolute;top: 40px;left: 0;width: 100%;background: #fff">
                <input type="hidden" id="district" value="">
                <ul>
                    <li style="border: 1px solid #E5E5E5;height: 40px;line-height: 40px;padding-left: 10%;">请选择区</li>
                </ul>
            </div>
            <div id="streetDiv" class="navigate_c navigate_c_s"
                 style="position: absolute;top: 40px;left: 0;width: 100%;background: #fff">
                <input type="hidden" id="street" value="">
                <ul>
                    <li style="border: 1px solid #E5E5E5;height: 40px;line-height: 40px;padding-left: 10%;">请选择街道</li>
                </ul>
            </div>
            <div class="navigate_bottom" style="background: white">
                <div class="navigate_left">
                    <label name="status" value="1" for="id1" class="feeback_ct_cl"
                           style="padding-left: 25%;font-size: 20px" required="required">正常</label>
                    <input style="display: none" id="id1" type="radio" name="status" value="1">
                    <label name="status" value="0" for="id2" class="feeback_ct_cl"
                           style="padding-left: 25%;font-size: 20px" required="required">故障</label>
                    <input style="display: none" id="id2" type="radio" name="status" value="0">
                </div>
                <div class="navigate_but">
                    <input type="button" value="查询" onclick="billboardPage1.select()">
                </div>
            </div>
        </div>
        <!--内容部分-->
        <div class="content_from" style="margin-top: 20px">
            <table border="1">
                <thead>
                <tr>
                    <th>设备</th>
                    <th>位置</th>
                    <th>状态</th>
                </tr>
                </thead>
                <tbody id="billboard-list-body">

                </tbody>
            </table>
            <div class="text-center">
                <ul class="pagination">
                </ul>
            </div>
        </div>
        <script type="text/template" id="billboard-list-template">
            <@ _.each(items, function (item) { @>
            <tr>
                <td><a href="wechat/billboard_details?id=<@= item.id @>"><@= item.code @></a></td>
                <td><a href="billboard/mapInfo?address=<@= item.city.name+item.district.name+item.street.name+item.location @>"><@= item.city.name+item.district.name+item.street.name+item.location @></a></td>
                <td>
                    <@ if(item.status == true) { @>
                    <a href="data/item?id=<@= item.id @>">正常</a>
                    <@ } else if(item.status == false) { @>
                    <a href="wechat/breakdown?id=<@= item.id @>">故障</a>
                    <@ } @>
                </td>
            </tr>
            <@ }); @>
        </script>
        <script type="text/template" id="billboard-page-template">
            <@ for(var index=1;index<=totalPages;index++) { @>
            <@ if(number==index-1) {@>
            <li class="list"><a class="font" style="color: #fff" href="javascript:void(0)" data-index="<@=index @>"><@=index @></a></li>
            <@ } else { @>
            <li ><a style="color: #0a6aa1" href="javascript:void(0)" data-index="<@=index @>"><@=index @></a></li>
            <@ }} @>
        </script>
        <script>
            $(function () {
                $(".navigate_top ul li").click(function () {
                    var idx = $(this).index();
                    $(".navigate_c").eq(idx).toggle();
                    $(".navigate_c").not($(".navigate_c").eq(idx)).hide();
                    $(this).toggleClass("content_cl");
                    $(".navigate_top ul li").not($(this)).removeClass("content_cl");
                });
                $(".navigate_c ul li").click(function () {
                    $(".navigate_c").slideUp();
                });
                $(".navigate_c_o ul li").click(function () {
                    var ht = $(this).text();
                    $(".navigate_top_o").text(ht);
                    $(".navigate_c_o ul li").removeClass("active");
                    $(this).addClass("active");
                    $(".navigate_cl").removeClass("content_cl");
                });
                $(".navigate_c_t ul li").click(function () {
                    var ht = $(this).text();
                    $(".navigate_top_t").text(ht);
                    $(".navigate_c_t ul li").removeClass("active");
                    $(this).addClass("active");
                    $(".navigate_cl").removeClass("content_cl");
                });
                $(".navigate_c_s ul li").click(function () {
                    var ht = $(this).text();
                    $(".navigate_top_s").text(ht);
                    $(".navigate_c_s ul li").removeClass("active");
                    $(this).addClass("active");
                    $(".navigate_cl").removeClass("content_cl");
                });
                $('.feeback_ct_cl').click(function () {
                    $(this).toggleClass("ct_click");
                    $('.feeback_ct_cl').not($(this)).removeClass("ct_click")
                });
                $("#cityDiv li").click(function () {
                    var city = $(this).attr("data-value");    //获取每个li的data-value值
                    $('#city').val(city);
                    loadLevel2();
                });
                $(".text-center li").click(function () {
                    $(this).addClass("list");
                    $(this).find("a").addClass("font");
                    $(".text-center li").not($(this)).removeClass("list");
                    $(".text-center li a").not($(this).find("a")).removeClass("font");
                })
            })
        </script>
        <script type="application/javascript">
            $utils.setting_template();
            function load(page) {
                if (page == null) {
                    page = 1;
                }
                request.authPost("resources/billboard/list", {page: page}, function (data) {
                    console.log(data);
                    if (data == null) {
                        return;
                    }
                    var tmpl = _.template($('#billboard-list-template').html());
                    $('#billboard-list-body').html(tmpl({items: data.content}));

                    var tmpl_page = _.template($('#billboard-page-template').html());
                    $('.pagination').html(tmpl_page({totalPages: data.totalPages, number: data.number}));

                    $('.pagination a').click(function () {
                        load($(this).data("index"));
                    });
                });
            }
            load();

            function loadLevel2() {
                var parentId = $('#city').val();
                request.post("resources/billboardAddress/child", {parentId: parentId, level: 2}, function (data) {
                    console.log(data);
                    if (data == null) {
                        return;
                    }
                    loadDistrictLi(data);
                });
            }
            function loadDistrictLi(data) {
                $('#districtDiv ul').empty();
                $('#districtDiv ul').append('<li data-value="" style="border: 1px solid #E5E5E5;height: 40px;line-height: 40px;padding-left: 10%;">请选择市</li>');
                $.each(data, function (index, item) {
                    $('#districtDiv ul').append('<li data-value="' + item.id + '" style="border: 1px solid #E5E5E5;height: 40px;line-height: 40px;padding-left: 10%;">' + item.name + '</li>');
                });
                $(".navigate_c ul li").click(function () {
                    $(".navigate_c").slideUp();
                });
                $(".navigate_c_t ul li").click(function () {
                    var ht = $(this).text();
                    $(".navigate_top_t").text(ht);
                    $(".navigate_c_t ul li").removeClass("active");
                    $(this).addClass("active");
                    $(".navigate_cl").removeClass("content_cl");
                });
                $("#districtDiv li").click(function () {
                    var district = $(this).attr("data-value");
                    $('#district').val(district);
                    loadLevel3();
                });
            }

            function loadLevel3() {
                var parentId = $('#district').val();
                request.post("resources/billboardAddress/child", {parentId: parentId, level: 3}, function (data) {
                    console.log(data);
                    if (data == null) {
                        return;
                    }
                    loadStreetLi(data);
                });
            }

            function loadStreetLi(data) {
                $('#streetDiv ul').empty();
                $('#streetDiv ul').append('<li data-value="" style="border: 1px solid #E5E5E5;height: 40px;line-height: 40px;padding-left: 10%;">请选择市</li>');
                $.each(data, function (index, item) {
                    $('#streetDiv ul').append('<li data-value="' + item.id + '" style="border: 1px solid #E5E5E5;height: 40px;line-height: 40px;padding-left: 10%;">' + item.name + '</li>');
                });
                $(".navigate_c ul li").click(function () {
                    $(".navigate_c").slideUp();
                });
                $(".navigate_c_s ul li").click(function () {
                    var ht = $(this).text();
                    $(".navigate_top_s").text(ht);
                    $(".navigate_c_s ul li").removeClass("active");
                    $(this).addClass("active");
                    $(".navigate_cl").removeClass("content_cl");
                });
                $("#streetDiv li").click(function () {
                    var street = $(this).attr("data-value");
                    $('#street').val(street);
                });
            }

            var billboardPage1 = {
                select: function (page) {
                    if (page == null) {
                        page = 1;
                    }
                    var city, district, street, status;
                    city = $('#city').val();
                    district = $('#district').val();
                    street = $('#street').val();
                    status = $('input[name="status"]:checked ').val();
                    $.post("resources/billboard/select", {
                        city: city,
                        district: district,
                        street: street,
                        location: "",
                        status: status,
                        adCompanyId: "",
                        page: page
                    }, function (data) {
                        console.log(data);
                        if (data == null) {
                            return;
                        }
                        var tmpl = _.template($('#billboard-list-template').html());
                        $('#billboard-list-body').html(tmpl({items: data.content}));

                        var tmpl_page = _.template($('#billboard-page-template').html());
                        $('.pagination').html(tmpl_page({totalPages: data.totalPages, number: data.number}));

                        $('.pagination a').click(function () {
                            billboardPage1.select($(this).data("index"));
                        });
                    });
                }
            }
        </script>
    </c:when>
    <c:otherwise>
        <div style="text-align: center;margin-top: 20%;">
            <i class="icon icon-remove" style="color:red;">您还没有绑定用户，请先去绑定</i>
        </div>
        <br>
        <div class="poster_but">
            <input id="bind" type="button" value="绑定">
        </div>
    </c:otherwise>
</c:choose>
</body>
<script>
    $("#bind").click(function () {
        location.href = "${root}/wechat/binding";
    });
</script>
</html>
